<template>
	<view>
	
		 <uni-nav-bar statusBar="true"
		 :fixed="true" :border="false" 
		 backgroundColor="#eff3f7">
		 	<view class="index-top-nav-title" slot="middle">
		 		<view class="leftIcon" @tap.stop="back">
		 			<i class="icon iconfont icon-arrow-left"></i>
		 		</view>
		 		<view class="index-top-nav-title-content">
		 			<!-- {{i18n.orderDetails}} -->
		 				{{i18n.myFund}}
		 		</view>
		 		<view class="rightIcon">
		 		</view>
		 	</view> 
		 </uni-nav-bar>
		<view class="list-content">
			<view class="list-nav">
				<view :class="{'active':cuIndex ==0}" @tap.stop="selectIndex('1')">{{i18n.RegularInvestment}}</view>
				<view :class="{'active':cuIndex ==1}" @tap.stop="selectIndex('2')">{{i18n.CurrentInvestment}}</view>
				<view :class="{'active':cuIndex ==2}" @tap.stop="selectIndex('0')">{{i18n.ending}}</view>
			</view>
			<template v-if="list.length>0">
			<block v-for="(item,index) in list" :key="index">
				<view class="list-item">
					<view class="list-item-title">
						<view class="">
							{{item.title}}
						</view>
						<text :class="{'act':item.status!=0}"> {{item.status==0?i18n.ending:i18n.ongoing}}</text>
					</view>
					<view class="list-item-content">
						<view class="list-item-content-item">
							<view>{{i18n.CommissionCycle}} {{item.day}}</view>
							<view>{{i18n.date}}     {{item.time}}</view>
						</view>
						<view class="list-item-content-detail" @tap.stop="detail(item)">
							{{i18n.orderDetails}}
						</view>
					</view>
				</view>
			
			</block>
			</template>
			<template v-else>
				<view class="nodata">{{i18n.nodata}}</view>
			</template>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcon from '../../components/uni-icon/uni-icon.vue';
	import Load from '../../components/common/load.vue';
	import Toast from '@/components/toast/toast.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,
			uniIcon,
			Load,
			Toast
		},
		data() {
			return {
				cuIndex:0,
				showLoad: false,
				type:1,
				list:[]
			}
		},
		onShow() {
			this.getList();
		},
		methods:{
			selectIndex(e){
				this.type = e;
				if(e==2){
					this.cuIndex = 1
				}else if(e==1){
					this.cuIndex = 0
				}else{
					this.cuIndex = 2
				}
				this.list = [];
				this.getList();
				
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getList(){
				let url = this.getRequestUrl+'/api/shop/tz_list';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					status:this.type,
					lang_type:this.getLangType=='chs'?1:this.getLangType=='en'?2:3
				}
				fetch(url,data,'POST').then(res=>{
					if(res.data.code){
						this.list = res.data.data;
					}
				})
			},
			detail(item){
				if(item.status!=0){
					uni.navigateTo({
						url:`/pages/fund/ding-detail?item=${JSON.stringify(item)}`
					})
					return;
				}
				uni.navigateTo({
					url:`/pages/fund/list-detail?item=${JSON.stringify(item)}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nodata{
		text-align: center;
		padding-top: 60upx;
		color: #6A6A6A;
	}
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		font-size: 36upx;
		text-align: center;
		background: linear-gradient(to right,#0d62ea,#309ff9);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftIcon{
			width: 80upx;
		}
		.rightIcon{
			width: 80upx;
		}
		.index-top-nav-title-content{
			flex: 1;
		}
	}
	.list-content{
		padding:30upx 30upx 0;
		.list-nav{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			padding: 30upx 0;
			// &::after{
			// 	position: absolute;
			// 	content: '';
			// 	left: 50%;
			// 	top: 50%;
			// 	width: 1upx;
			// 	height: 50upx;
			// 	transform: translate(-50%,-50%);
			// 	background-color: #929292;
			// }
			view{
				margin-right: 50upx;
				border-bottom: 2upx solid #FFFFFF;
				&.active{
					position: relative;
					font-weight: bold;
					color: #1d7dff;
					border-color: #1d7dff;
				}
			}
		}
		.list-item{
			padding:30upx;
			border-radius: 10upx;
			background-color: #F3F3F3;
			margin-bottom: 30upx;
			.list-item-title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					flex: 1;
					font-size:28upx;
				}
				text{
					font-size: 22upx;
					width: 96upx;
					height: 40upx;
					line-height: 40upx;
					text-align: center;
					// border-radius: 20upx;
					// background-color: #e1e1e1;
					color: #333333;
					&.act{
						// background-color: #3a97fe;
						color: #3a97fe;
					}
				}
			}
			.list-item-content{
				color: #AAAAAA;
				font-size: 26upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.list-item-content-item{
					view{
						margin-top: 24upx;
					}
				}
			}
			.list-item-content-detail{
				width: 116upx;
				height: 45upx;
				line-height: 45upx;
				color: #FFFFFF;
				background-color: #3A97FE;
				text-align: center;
				border-radius: 8upx;
			}
		}
	}
</style>
